<template>
	<div class="modal-container">
		<teleport v-if="attrs.searchContainer" :to="attrs.searchContainer">
			<!-- <a-input-search v-model:value="like" placeholder="请输入需要查找的房源地址" enter-button="搜索" @search="onSearch" /> -->
			<search-input v-model:params="params" v-bind="searchOption" />
		</teleport>
		<div v-else class="search-container">
			<search-input v-model:params="params" v-bind="searchOption" />
		</div>
		<div class="modal-grid">
			<vxe-grid ref="grid" v-bind="gridOptions">
				<template #handle="{row}">
					<a-button type="primary" @click="handleWarning(row)">处理</a-button>
				</template>
			</vxe-grid>
		</div>
	</div>
	<a-modal v-model:visible="showHandleModal" width="700px" title="门禁通行预警处理" destroyOnClose :maskClosable="false" :confirmLoading="handleLoading" @ok="handleOk">
		<a-form ref="formRef" :model="form" :label-col="{span: 6}" :wrapper-col="{span: 18}" autocomplete="off" labelAlign="left">
			<a-form-item label="地址">{{ activeData?.address }}</a-form-item>
			<a-form-item label="姓名">{{ activeData?.realname }}</a-form-item>
			<a-form-item label="手机号">{{ activeData?.phone }}</a-form-item>
			<a-form-item label="外出结束时间" name="confirmBackTime" :rules="[{required: false, message: '请选择外出结束时间'}]">
				<a-date-picker v-model:value="form.confirmBackTime" />
			</a-form-item>
			<a-form-item label="原因" name="reason" :rules="[{required: false}]">
				<a-textarea v-model:value="form.reason" show-count :maxlength="200" />
			</a-form-item>
		</a-form>
		<a-alert message="注：如未选择结束时间，则预警从点击确认后第二天重新计算预警周期" type="error" />
	</a-modal>
</template>

<script setup lang="ts">
	import {createVNode, reactive, ref, useAttrs} from 'vue'
	import {VxeGridProps} from 'vxe-table'
	import {pagerConfig, proxyConfigProps} from 'yuxin-base/src/utils/vxe-table'
	import {accessWarningLog, accessWarningLogHandle} from '@/api/device'
	import {message, Modal} from 'ant-design-vue'
	import {QuestionCircleOutlined} from '@ant-design/icons-vue'
	import dayjs from 'dayjs'
	import {SearchProps} from 'yuxin-base/src/types'

	const attrs = useAttrs()
	// 搜索配置
	const searchOption = reactive<SearchProps>({
		placeholder: '请输入需要查找的房源地址',
		// 搜索匹配类型
		matchTypes: [],
		// 搜索选项配置
		options: [],
		onSearch() {
			onSearch()
		}
	})
	const formRef = ref()
	const showHandleModal = ref(false)
	const form = ref({
		reason: '',
		confirmBackTime: dayjs()
	})
	const handleLoading = ref(false)
	const params = ref({
		like: null
	})
	const grid = ref()
	const gridOptions = reactive<VxeGridProps>({
		align: 'center',
		height: 'auto',
		showOverflow: false,
		rowConfig: {isHover: true},
		columns: [
			{title: '姓名', minWidth: 100, field: 'realname'},
			{title: '手机号', width: 150, field: 'phone'},
			{title: '地址', minWidth: 200, field: 'address'},
			{title: '房间', minWidth: 200, field: 'roomName'},
			{title: '上一次通行时间', minWidth: 200, field: 'lastPassTime'},
			{title: '未通行天数', width: 150, field: 'content'},
			{title: '操作', width: 100, slots: {default: 'handle'}, fixed: 'right'}
		],
		pagerConfig,
		proxyConfig: {
			props: proxyConfigProps,
			ajax: {
				query({page: {currentPage: current, pageSize: size}}) {
					return queryData({like: params.value.like, current, size})
				}
			}
		}
	})

	async function queryData(query: any) {
		const res = await accessWarningLog({...query, status: 0})
		res.data.records = res.data.records.map((data: any) => {
			return {
				...data,
				address: `${data.communityName}`
			}
		})
		return res
	}

	const activeData = ref<any>(null)

	async function handleWarning(data: any) {
		activeData.value = data
		showHandleModal.value = true
	}

	function onSearch() {
		grid.value.commitProxy('query')
	}

	async function handleOk() {
		await formRef.value.validateFields()
		handleLoading.value = true
		await accessWarningLogHandle({
			id: activeData.value.id,
			confirmRemark: form.value.reason,
			confirmBackTime: form.value.confirmBackTime?.format('YYYY-MM-DD')
		}).finally(() => {
			handleLoading.value = false
		})
		showHandleModal.value = false
		message.success('操作成功')
		grid.value.commitProxy('query')
	}
</script>

<style scoped>
	.modal-container {
		height: 100%;
		display: flex;
		flex-direction: column;
	}
	.search-container {
		padding-bottom: 12px;
	}
	.modal-grid {
		flex: 1;
		overflow: hidden;
	}
</style>
